<template>
	<view class="detailsmianbox">
		<qi_navigation :navzuoicof="'icon-icon-test59'"></qi_navigation>
		<scroll-view scroll-y class="scroll">
			<view>
				<view class="detaimg">
					<image :src="data.goods.cover_url"></image>
				</view>
				<view class="detmian">
					<view class="dettitle">
						<text>{{ data.goods.title }}</text>
					</view>
					<view class="detprice">
						<text>￥ {{ data.goods.price }}</text>
						<text>销量: {{ data.goods.sales }}</text>
					</view>
				</view>
				<qi_tabControl
					:titles="['商品详情', '商品评论', '推荐商品']"
					@tabClick="tabClick"
				></qi_tabControl>
				<view class="details" v-show="ishow === 0">
					<!-- <rich-text :nodes="data.goods.details"></rich-text> -->
					<!-- 不需要引入，可直接使用 -->
					<mp-html :content="data.goods.details" />
				</view>
				<view v-show="ishow === 1">
					<comment :comments="data.goods.comments" />
				</view>
				<view v-show="ishow === 2">
					<qi_homegoods :goods="data.like_goods"></qi_homegoods>
				</view>
			</view>
		</scroll-view>
		<view v-if="Object.keys(data.goods).length !== 0">
			<detailscart
				@collect="collect"
				:collshow="data.collshow"
				@addcart="addcartlist"
				:selectnum="num"
				@subswitcart="subswitcart"
			/>
		</view>
	</view>
</template>
<script setup>
import {
	reactive,
	toRefs,
	ref,
	onMounted,
	computed,
	getCurrentInstance
} from 'vue';
import {
	getcategoods,
	addcarts,
	upcollects,
	getcollects
} from '@/http/cate.js';
import { onLoad } from '@dcloudio/uni-app';
import comment from './comment.vue';
import detailscart from './detailscart.vue';
import { useStore } from 'vuex'; // 引入useStore 方法
import { getcarts } from '@/http/api.js';

let { getters } = useStore();
const { proxy } = getCurrentInstance();
const store = useStore(); // 该方法用于返回store 实例
components: {
	comment, detailscart;
}
const data = reactive({
	goods: {},
	like_goods: [],
	collects: [],
	collshow: true
});
let ishow = ref(0);
let num = ref(0);
let selectnum = ref(0);
let collid = ref('');
onLoad(({ id }) => {
	collid.value = id;
	getdetails(id);
	num.value = totalnum.value ||0
});
let totalnum = computed(() => getters['qi_cart/total']);
const getdetails = id => {
	getcollects().then(res => {
		if(res.status_code == 200){
			data.collects = res.data;
			let isshow = data.collects.find(
				res => res.goods.id == collid.value
			);
		if (!isshow) {
			data.collshow = false;
		}
		}
		
	});
	getcategoods(id).then(res => {
		data.goods = res.goods;
		data.like_goods = res.like_goods;
	});
};
const tabClick = i => {
	ishow.value = i;
};
// 收藏
const collect = val => {
	data.collshow = val;
	upcollects(data.goods.id).then(res => {});
};
const subswitcart = () => {
	console.log(22);
	// proxy.islogin.showToast('加入成功');
	// const cartlist = {
	// 	goods_id: data.goods.id
	// };
	// addcarts(cartlist).then(res => {
	// 		num.value = num.value + 1 
			
	// });
	// const cartlist = {
	// 	goods_id: data.goods.id
	// };
	// addcarts(cartlist).then(res => {
	// 		num.value = num.value + 1 
	// });
	　uni.reLaunch({
						url: "/pages/cart/cart",
						success: function(e) {
								// var page = getCurrentPages().pop();
								// if (page == undefined || page == null) return;
								// 		page.getcatelist(); //或者其它操作
								}
				});
	
};
// 加入购物车
const addcartlist = () => {
	proxy.islogin.showToast('加入成功');
	const cartlist = {
		goods_id: data.goods.id
	};
	addcarts(cartlist).then(res => {
			num.value = num.value + 1 
	});
	// proxy.islogin.debounce(debounceaddcart());
};
</script>

<style lang="scss">
.detailsmianbox {
	.scroll {
		height: calc(100vh - 50px);
	}
	.details {
		display: flex;
		justify-content: center;
	}
	.detaimg {
		display: flex;
		justify-content: center;
	}
	.detmian {
		.dettitle {
			padding: 10px 0;
			font-weight: 700;
			display: flex;
			justify-content: center;
		}
		.detprice {
			padding: 10px 0;
			display: flex;
			justify-content: space-around;
			text:first-child {
				color: red;
			}
		}
	}
}
</style>
